<template>
  <page-loading :show="pageLoading">
    <view class="u-wrap">
      <view class="u-menu-wrap">
        <scroll-view
          scroll-y
          scroll-with-animation
          class="u-tab-view menu-scroll-view"
          :scroll-top="scrollTop"
          :scroll-into-view="itemId"
        >
          <view
            v-for="(item, index) in tabbar"
            :key="index"
            class="u-tab-item"
            :class="[current == index ? 'u-tab-item-active' : '']"
            @tap.stop="swichMenu(index)"
          >
            <view
              class="u-line-1"
              :class="[current == index ? 'u-line-1-active' : '']"
            >
              {{ item.name }}
            </view>
            <view style="width: 40rpx">
              <view v-show="count[index].number === count[index].total">
                <view class="number" v-show="count[index].abnormal > 0">{{
                  count[index].abnormal
                }}</view>
                <i-icon
                  v-show="count[index].abnormal === 0"
                  icon="iconxuanzhong"
                  type="single"
                  size="36rpx"
                  color="#4FAF26"
                ></i-icon>
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- 右 -->
        <scroll-view
          :scroll-top="scrollRightTop"
          scroll-y
          scroll-with-animation
          class="right-box"
          @scroll="rightScroll"
        >
          <view class="page-view">
            <view
              class="class-item"
              :id="'item' + index"
              v-for="(item, index) in tabbar"
              :key="index"
            >
              <view class="item-title flex flex-jc-sb">
                <text>{{ item.name }}</text>
                <view
                  class="abnormal color-999 font-26"
                  v-if="count[index].abnormal > 0"
                  >异常拍照
                  <text class="color-EB5C02">{{
                    count[index].abnormal
                  }}</text></view
                >
              </view>
              <view class="item-container">
                <view
                  class="thumb-box"
                  v-for="(item1, index1) in item.list"
                  :key="index1"
                >
                  <view
                    class="thumb-box-title flex flex-jc-sb flex-ai-c"
                    v-if="item1.list"
                  >
                    <view class="item-menu-name2">{{ item1.name }}</view>
                  </view>
                  <view
                    class="thumb-box-title flex flex-jc-sb flex-ai-c"
                    v-else
                  >
                    <view
                      v-if="item1.standard === 0"
                      class="item-menu-name"
                      :class="
                        item1.id === item.type ? 'color-EB5C02' : 'color-999'
                      "
                      @click="selItem(item1, index, index1)"
                      >{{ item1.name }}</view
                    >
                    <view
                      v-else
                      class="item-menu-name"
                      :class="
                        item1.id === item.type ? 'color-399F0D' : 'color-999'
                      "
                      @click="selItem(item1, index, index1)"
                      >{{ item1.name }}</view
                    >

                    <view
                      v-if="item1.id === item.type && item1.type === 2"
                      :class="selected[item.id].url === '' ? 'b-dashed' : ''"
                      class="item-menu-image flex flex-ai-c flex-jc-c"
                      @click="choosePic(item.id, index)"
                    >
                      <i-icon
                        v-show="selected[item.id].url == ''"
                        icon="iconxiangji"
                        type="single"
                        size="34rpx"
                        color="#999"
                      ></i-icon>
                      <image
                        class="item-menu-image"
                        v-show="selected[item.id].url !== ''"
                        :src="selected[item.id].url"
                        mode=""
                      ></image>
                    </view>
                  </view>

                  <view class="item-menu-list" v-if="item1.list">
                    <view
                      class="thumb-box"
                      v-for="(item2, index2) in item1.list"
                      :key="item2.id"
                    >
                      <view class="thumb-box-title flex flex-jc-sb flex-ai-c">
                        <view
                          v-if="item2.standard === 0"
                          class="item-menu-name"
                          :class="
                            item2.id === item1.type
                              ? 'color-EB5C02'
                              : 'color-999'
                          "
                          @click="selItem(item2, index, index1, index2)"
                          >{{ item2.name }}</view
                        >
                        <view
                          v-else
                          class="item-menu-name"
                          :class="
                            item2.id === item1.type
                              ? 'color-399F0D'
                              : 'color-999'
                          "
                          @click="selItem(item2, index, index1, index2)"
                          >{{ item2.name }}</view
                        >
                        <view
                          v-if="item2.id === item1.type && item2.type === 2"
                          :class="
                            selected[item1.id].url === '' ? 'b-dashed' : ''
                          "
                          class="item-menu-image flex flex-ai-c flex-jc-c"
                          @click="choosePic(item1.id, index)"
                        >
                          <i-icon
                            v-show="selected[item1.id].url == ''"
                            icon="iconxiangji"
                            type="single"
                            size="34rpx"
                            color="#999"
                          ></i-icon>
                          <image
                            class="item-menu-image"
                            v-show="selected[item1.id].url !== ''"
                            :src="selected[item1.id].url"
                            mode=""
                          ></image>
                        </view>
                      </view>
                      <view
                        class="handle-method flex"
                        v-show="item2.id === item1.type && item2.type == 2"
                      >
                        <view class="methods-title color-EB5C02 font-26"
                          >处理意见:</view
                        >
                        <view class="methods">
                          <view
                            class="methods-item"
                            :class="{
                              'methods-item-active':
                                selected[item1.id].advice_Type === 2,
                            }"
                            @click="chooseAdvice(2, item1.id, index)"
                            >建议调整/更换</view
                          >
                          <view
                            class="methods-item"
                            :class="{
                              'methods-item-active':
                                selected[item1.id].advice_Type === 1,
                            }"
                            @click="chooseAdvice(1, item1.id, index)"
                            >立即调整/更换</view
                          >
                        </view>
                      </view>
                    </view>
                  </view>

                  <view v-else>
                    <view
                      v-show="item1.id === item.type && item1.type == 2"
                      class="handle-method flex"
                    >
                      <view class="methods-title color-EB5C02 font-26"
                        >处理意见:</view
                      >
                      <view class="methods">
                        <view
                          class="methods-item"
                          :class="{
                            'methods-item-active':
                              selected[item.id].advice_Type === 2,
                          }"
                          @click="chooseAdvice(2, item.id, index)"
                          >建议调整/更换</view
                        >
                        <view
                          class="methods-item"
                          :class="{
                            'methods-item-active':
                              selected[item.id].advice_Type === 1,
                          }"
                          @click="chooseAdvice(1, item.id, index)"
                          >立即调整/更换</view
                        >
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="btn flex">
        <button class="btn-left" @click="refuse">客户拒绝检查</button>
        <button class="btn-right" @click="submit">保存</button>
      </view>

      <!-- 预览图片 -->
      <preview-image
        :imgs="previewUrl"
        :preview.sync="showPreviewImg"
        @previewDelete="delPic"
      ></preview-image>

      <!-- 弹框提示 -->
      <u-popup v-model="popupShow" mode="center" border-radius="20" width="540">
        <view class="popup-content">
          <view class="title">温馨提示</view>
          <view class="content">{{ modalText }}</view>
          <view class="btn-box flex">
            <button class="btn-left" @click="popupCancel">取消</button>
            <button class="btn-right" @click="popupConfirme">
              {{ btnText }}
            </button>
          </view>
        </view>
      </u-popup>
    </view></page-loading
  >
</template>
<script>
import previewImage from '@/components/i-preview-image'
export default {
  data() {
    return {
      scrollTop: 0, //tab标题的滚动条位置
      oldScrollTop: 0,
      current: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      itemId: '', // 栏目右边scroll-view用于滚动的id
      tabbar: [],
      menuItemPos: [],
      arr: [],
      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
      timer: null, // 定时器
      id: '', //总类目id
      name: '', //总类目名称
      currentId: '', //当前操作的项目
      currrentName: '', //当前操作的项目
      count: [], //计数
      selected: {}, //已选项目
      selectedCopy: {}, //已选项目-拒绝
      orderId: '', //到店单id
      technicianName: '', //技师名字
      previewUrl: [], //预览图片url
      showPreviewImg: false, //显示预览
      popupShow: false, //弹窗
      modalText: '',
      btnText: '确定', //返回提示 “保存”  保存提示 “确定”
      backPress: '', //返回事件来源 popup 弹窗点返回
      pageLoading: false, //初始化加载效果
    }
  },

  onLoad(e) {
    this.orderId = e.id
    this.technicianName = e.name ? e.name : ''
    this.initData()
  },

  onReady() {
    this.getMenuItemTop()
  },

  onBackPress() {
    if (this.backPress !== 'popup') {
      //非弹窗确定返回
      let isNeedSave = false
      // for (let i = 0; i < this.count.length; i++) {
      //   if (this.count[i].number > 0) {
      //     console.log('jajaj')
      //     isNeedSave = true
      //     break
      //   }
      // }
      for (let i in this.selected) {
        if (this.selected[i].detection_State === 1) {
          isNeedSave = true
          break
        } else if (this.selected[i].detection_State === 2) {
          if (this.selected[i].url || this.selected[i].advice_Type) {
            isNeedSave = true
            break
          }
        }
      }
      if (isNeedSave) {
        this.modalText = '您当前编辑的信息还未保存，请确认是否保存'
        this.btnText = '保存'
        this.popupShow = true
        return true
      }
    }
    return false
  },

  methods: {
    async initData() {
      try {
        const res = await this.$api.jsonData.getEngine()
        this.tabbar = res.data[0].list
        this.id = res.data[0].id
        this.name = res.data[0].name
        let tmp = 0
        for (let i = 0; i < this.tabbar.length; i++) {
          tmp = 0
          if (this.tabbar[i].list[0].list) {
            tmp = this.tabbar[i].list.length
            for (let j = 0; j < this.tabbar[i].list.length; j++) {
              this.$set(this.selected, this.tabbar[i].list[j].id, {
                car_Detection_Typedata_Type_Id: this.tabbar[i].id, //上级id
                car_Detection_Typedata_Type_Name: this.tabbar[i].name, //上级名称
                car_Detection_Typedata_Id: this.tabbar[i].list[j].id, //当前项目id
                car_Detection_Typedata_Name: this.tabbar[i].list[j].name, //当前项目名称
                car_Detection_Typedata_Choose_Id: 0, //状态id
                car_Detection_Typedata_Choose_Name: '', //状态名称
                url: '', //异常图片
                detection_State: 0, //状态 0未检测，1正常，2异常
                advice_Type: 0, //处理意见 0没有,1紧急处理,2建议处理
              })
            }
          } else {
            tmp = 1
            this.$set(this.selected, this.tabbar[i].id, {
              car_Detection_Typedata_Type_Id: this.id, //上级id
              car_Detection_Typedata_Type_Name: this.name, //上级名称
              car_Detection_Typedata_Id: this.tabbar[i].id, //当前项目id
              car_Detection_Typedata_Name: this.tabbar[i].name, //当前项目名称
              car_Detection_Typedata_Choose_Id: 0, //状态id
              car_Detection_Typedata_Choose_Name: '', //状态名称
              url: '', //异常图片
              detection_State: 0, //状态 0未检测，1正常，2异常
              advice_Type: 0, //处理意见 0没有,1紧急处理,2建议处理
            })
          }
          this.count.push({
            number: 0,
            abnormal: 0,
            total: tmp,
          })
        }
        Object.assign(this.selectedCopy, this.selected)
        this.pageLoading = true
      } catch (error) {
        console.log(error)
        this.pageLoading = true
      }
    },

    //点击项目
    selItem(data, index, index1, index2) {
      if (index2 === undefined) {
        //一级
        //检查上一次的项目是否填写完整
        if (this.currentId !== '') {
          //非同一项
          if (this.tabbar[index].id !== this.currentId) {
            //异常状态
            if (this.selected[this.currentId].detection_State === 2) {
              if (
                !this.selected[this.currentId].url ||
                !this.selected[this.currentId].advice_Type
              ) {
                uni.showToast({
                  title: `[${this.currrentName}]\n异常未填写完整`,
                  duration: 3000,
                  icon: 'none',
                })
                return
              }
            }
          }
        }
        this.currentId = this.tabbar[index].id
        this.currrentName = this.tabbar[index].name
        this.$set(
          this.tabbar[index],
          'type',
          this.tabbar[index].list[index1].id
        ) //当前项目选择的id
        if (data.standard !== 0) {
          //正常
          this.$set(this.tabbar[index].list[index1], 'type', 1) //已标记为正常
          this.$set(this.tabbar[index], 'type', data.id)
          if (this.selected[this.currentId].detection_State === 2) {
            //异常改正常
            if (
              this.selected[this.currentId].url &&
              this.selected[this.currentId].advice_Type
            ) {
              this.count[index].abnormal -= 1
              this.count[index].number -= 1
            }
            this.count[index].number += 1
            this.selected[this.currentId].url = ''
            this.selected[this.currentId].advice_Type = 0
          } else if (this.selected[this.currentId].detection_State === 1) {
            //正常改未检测
            this.count[index].number -= 1
            this.$set(this.tabbar[index].list[index1], 'type', 0)
            this.$set(this.tabbar[index], 'type', '')
          } else {
            //未检测改正常
            this.count[index].number += 1
          }
        } else {
          //异常
          this.$set(this.tabbar[index].list[index1], 'type', 2) //已标记为异常
          if (this.selected[this.currentId].detection_State === 1) {
            //正常变异常
            this.count[index].number -= 1
          } else if (this.selected[this.currentId].detection_State === 2) {
            //异常改未检测
            if (
              this.selected[this.currentId].url &&
              this.selected[this.currentId].advice_Type
            ) {
              this.count[index].abnormal -= 1
              this.count[index].number -= 1
            }
            this.selected[this.currentId].url = ''
            this.selected[this.currentId].advice_Type = 0
            this.$set(this.tabbar[index].list[index1], 'type', 0)
            this.$set(this.tabbar[index], 'type', '')
          }
        }
        this.saveStatu(data, this.tabbar[index].list[index1].type)
      } else {
        //二级
        //检查上一次的项目是否填写完整
        if (this.currentId !== '') {
          //非同一项
          if (this.tabbar[index].list[index1].id !== this.currentId) {
            //异常状态
            if (this.selected[this.currentId].detection_State === 2) {
              if (
                !this.selected[this.currentId].url ||
                !this.selected[this.currentId].advice_Type
              ) {
                uni.showToast({
                  title: `[${this.currrentName}]\n异常未填写完整`,
                  duration: 3000,
                  icon: 'none',
                })
                return
              }
            }
          }
        }
        this.currentId = this.tabbar[index].list[index1].id
        this.currrentName = this.tabbar[index].list[index1].name
        this.$set(
          this.tabbar[index].list[index1],
          'type',
          this.tabbar[index].list[index1].list[index2].id
        ) //当前项目选择的id
        if (data.standard !== 0) {
          //正常
          this.tabbar[index].list[index1].list[index2].type = 1 //已标记为正常
          this.tabbar[index].list[index1].type = this.tabbar[index].list[
            index1
          ].list[index2].id
          if (this.selected[this.currentId].detection_State === 2) {
            //异常改正常
            if (
              this.selected[this.currentId].url &&
              this.selected[this.currentId].advice_Type
            ) {
              this.count[index].abnormal -= 1
              this.count[index].number -= 1
            }
            this.count[index].number += 1
            this.selected[this.currentId].url = ''
            this.selected[this.currentId].advice_Type = 0
          } else if (this.selected[this.currentId].detection_State === 1) {
            //正常改未检测
            this.count[index].number -= 1
            this.tabbar[index].list[index1].list[index2].type = 0
            this.tabbar[index].list[index1].type = ''
          } else {
            //未检测改正常
            this.count[index].number += 1
          }
        } else {
          //异常
          this.tabbar[index].list[index1].list[index2].type = 2 //已标记为异常
          if (this.selected[this.currentId].detection_State === 1) {
            //正常变异常
            this.count[index].number -= 1
          } else if (this.selected[this.currentId].detection_State === 2) {
            //异常改未检测
            if (
              this.selected[this.currentId].url &&
              this.selected[this.currentId].advice_Type
            ) {
              this.count[index].abnormal -= 1
              this.count[index].number -= 1
            }
            this.selected[this.currentId].url = ''
            this.selected[this.currentId].advice_Type = 0
            this.tabbar[index].list[index1].list[index2].type = 0
            this.tabbar[index].list[index1].type = ''
          }
        }
        this.saveStatu(data, this.tabbar[index].list[index1].list[index2].type)
      }
    },

    //保存检查状态 status  1 正常 2 异常
    saveStatu(data, status) {
      this.$set(this.selected[this.currentId], 'detection_State', status)
      this.selected[this.currentId].car_Detection_Typedata_Choose_Id = data.id
      this.selected[this.currentId].car_Detection_Typedata_Choose_Name =
        data.name
    },

    //选择处理意见
    chooseAdvice(data, id, index) {
      if (id !== this.currentId) {
        if (
          this.selected[this.currentId].detection_State === 2 &&
          (!this.selected[this.currentId].url ||
            !this.selected[this.currentId].advice_Type)
        ) {
          uni.showToast({
            title: `[${this.currrentName}]\n异常未填写完整`,
            duration: 3000,
            icon: 'none',
          })
          return
        }
      }
      this.currentId = id
      this.currrentName = this.selected[
        this.currentId
      ].car_Detection_Typedata_Name
      this.current = index
      if (this.selected[id].url !== '' && this.selected[id].advice_Type === 0) {
        this.count[index].number += 1
        this.count[index].abnormal += 1
      }
      this.$set(this.selected[id], 'advice_Type', data)
    },

    //上传图片
    selPic(id, index) {
      const _this = this
      uni.showActionSheet({
        itemList: ['拍照', '打开相册'],
        success(res) {
          const cameraType = res.tapIndex ? 'album' : 'camera'
          uni.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: [cameraType], // 从相册选择
            success: function (result) {
              uni.showLoading({
                title: '图片上传中~',
              })
              _this.$api.files
                .uploadImg({
                  filePath: result.tempFilePaths[0],
                })
                .then((res) => {
                  if (
                    _this.selected[id].advice_Type !== 0 &&
                    _this.selected[id].url === ''
                  ) {
                    _this.count[index].number += 1
                    _this.count[index].abnormal += 1
                  }
                  _this.selected[id].url = res.baseUrl + res.url
                  uni.hideLoading()
                })
                .catch((err) => {
                  uni.hideLoading()
                  uni.showToast({
                    title: '图片上传失败，请稍后重试',
                    icon: 'none',
                  })
                })
            },
          })
        },
      })
    },

    //选择图片
    choosePic(id, index) {
      console.log(this.selected[this.currentId])
      if (id !== this.currentId) {
        if (
          this.selected[this.currentId].detection_State === 2 &&
          (!this.selected[this.currentId].url ||
            !this.selected[this.currentId].advice_Type)
        ) {
          uni.showToast({
            title: `[${this.currrentName}]\n异常未填写完整`,
            duration: 3000,
            icon: 'none',
          })
          return
        }
      }
      this.currentId = id
      this.currrentName = this.selected[
        this.currentId
      ].car_Detection_Typedata_Name
      this.current = index
      if (this.selected[id].url) {
        this.previewUrl[0] = this.selected[id].url
        this.showPreviewImg = true
      } else {
        this.selPic(id, index)
      }
    },

    //删除图片
    delPic() {
      this.selected[this.currentId].url = ''
      this.count[this.current].number -= 1
      this.count[this.current].abnormal -= 1
    },

    //提交
    submit() {
      //填的最后一项是否填写完整
      if (
        this.currentId !== '' &&
        this.selected[this.currentId].detection_State === 2
      ) {
        if (
          !this.selected[this.currentId].url ||
          !this.selected[this.currentId].advice_Type
        ) {
          uni.showToast({
            title: `[${this.currrentName}]\n异常未填写完整`,
            duration: 3000,
            icon: 'none',
          })
          this.backPress = ''
          return
        }
      }

      //是否全部填写
      let num = 0
      for (let i = 0; i < this.count.length; i++) {
        if (this.count[i].number !== this.count[i].total) {
          num = num + this.count[i].total - this.count[i].number
        }
      }
      if (num > 0) {
        this.modalText =
          '您当前还有' + num + '项功能未检查，请确认是否进行下一步'
        this.btnText = '确定'
        this.popupShow = true
      } else {
        this.saveData()
      }
    },

    //保存
    saveData() {
      let data = []
      for (let i in this.selected) {
        data.push(this.selected[i])
      }
      this.$api.afterSales
        .addDismantCheck({
          order_arrive_store_id: this.orderId, //到店单id
          technician_name: this.technicianName, //检测人名称
          detection_Type: 5, //检测类型(4上检驾驶舱,5上检发动机舱,6上检底盘)
          list: data,
        })
        .then((res) => {
          uni.showToast({
            title: '提交成功',
            duration: 2000,
          })
          this.backPress = 'popup'
          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //拒绝检查
    refuse() {
      let data = []
      for (let i in this.selectedCopy) {
        data.push(this.selectedCopy[i])
      }
      this.$api.afterSales
        .addDismantCheck({
          order_arrive_store_id: this.orderId, //到店单id
          technician_name: this.technicianName, //检测人名称
          detection_Type: 5, //检测类型(4上检驾驶舱,5上检发动机舱,6上检底盘)
          list: data,
        })
        .then((res) => {
          uni.showToast({
            title: '提交成功',
            duration: 2000,
          })
          this.backPress = 'popup'
          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        })
        .catch((e) => {
          console.log(e)
        })
    },

    popupCancel() {
      this.popupShow = false
      if (this.btnText === '保存') {
        this.backPress = 'popup'
        uni.navigateBack()
      }
    },

    popupConfirme() {
      this.popupShow = false
      if (this.btnText === '保存') {
        this.backPress = 'popup'
        this.submit()
      } else {
        this.saveData()
      }
    },

    // 点击左边的栏目切换
    async swichMenu(index) {
      if (this.arr.length == 0) {
        await this.getMenuItemTop()
      }
      if (index == this.current) return
      this.scrollRightTop = this.oldScrollTop
      this.$nextTick(function () {
        this.scrollRightTop = this.arr[index]
        this.current = index
        this.leftMenuStatus(index)
      })
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this)
        query
          .select('.' + elClass)
          .fields(
            {
              size: true,
            },
            (res) => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  this.getElRect(elClass)
                }, 10)
                return
              }
              this[dataVal] = res.height
              resolve()
            }
          )
          .exec()
      })
    },
    // 观测元素相交状态
    async observer() {
      this.tabbar.map((val, index) => {
        let observer = uni.createIntersectionObserver(this)
        // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
        // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
        observer
          .relativeTo('.right-box', {
            top: 0,
          })
          .observe('#item' + index, (res) => {
            if (res.intersectionRatio > 0) {
              let id = res.id.substring(4)
              this.leftMenuStatus(id)
            }
          })
      })
    },
    // 设置左边菜单的滚动状态
    async leftMenuStatus(index) {
      this.current = index
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('menu-scroll-view', 'menuHeight')
        await this.getElRect('u-tab-item', 'menuItemHeight')
      }
      // 将菜单活动item垂直居中
      this.scrollTop =
        index * this.menuItemHeight +
        this.menuItemHeight / 2 -
        this.menuHeight / 2
    },
    // 获取右边菜单每个item到顶部的距离
    getMenuItemTop() {
      new Promise((resolve) => {
        let selectorQuery = uni.createSelectorQuery()
        selectorQuery
          .selectAll('.class-item')
          .boundingClientRect((rects) => {
            // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
            if (!rects.length) {
              setTimeout(() => {
                this.getMenuItemTop()
              }, 10)
              return
            }
            rects.forEach((rect) => {
              // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
              this.arr.push(rect.top - rects[0].top)
              resolve()
            })
          })
          .exec()
      })
    },
    // 右边菜单滚动
    async rightScroll(e) {
      this.oldScrollTop = e.detail.scrollTop
      if (this.arr.length == 0) {
        await this.getMenuItemTop()
      }
      if (this.timer) return
      if (!this.menuHeight) {
        await this.getElRect('menu-scroll-view', 'menuHeight')
      }
      setTimeout(() => {
        // 节流
        this.timer = null
        // scrollHeight为右边菜单垂直中点位置
        let scrollHeight = e.detail.scrollTop + this.menuHeight / 2
        for (let i = 0; i < this.arr.length; i++) {
          let height1 = this.arr[i]
          let height2 = this.arr[i + 1]
          // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
          if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
            this.leftMenuStatus(i)
            return
          }
        }
      }, 10)
    },
  },

  components: {
    previewImage,
  },
}
</script>

<style lang="scss" scoped>
.btn {
  padding: 16rpx 24rpx;
  background: #fff;

  .btn-left {
    width: 50%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx 0 0 44rpx;
    background: #333;
    color: #ffe23e;
    font-size: 30rpx;
    font-weight: 500;
  }

  .btn-right {
    width: 50%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 0px 44px 44px 0px;
    background: linear-gradient(-90deg, #fdd421, #ffe23e);
    color: #333;
    font-size: 30rpx;
    font-weight: 500;
  }
}

/deep/ uni-button:after {
  border: none;
}
.u-wrap {
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  display: flex;
  flex-direction: column;
}

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: #f6f6f6;
}

.u-tab-view {
  width: 210rpx;
}

.u-tab-item {
  height: 117rpx;
  padding-left: 15rpx;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.u-line-1 {
  width: 160rpx;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 26rpx;
  color: #666666;
  font-weight: 500;
}

.number {
  width: 36rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  border-radius: 50%;
  background: #eb5c02;
  color: #fff;
}

.u-line-1-active {
  color: #fbb000;
  font-size: 28rpx;
  font-weight: 600;
}

.u-tab-item-active {
  position: relative;
  background: #f4f4f4;
}

.u-tab-item-active::before {
  content: '';
  position: absolute;
  border-left: 4px solid #fbb000;
  height: 117rpx;
  left: 0;
  top: 0;
}

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

.page-view {
  padding: 16rpx;
}

.class-item {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 16rpx;
  border-radius: 8rpx;
}

.class-item:last-child {
  min-height: 100vh;
}

.item-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: bold;
  padding-bottom: 25rpx;

  .abnormal {
    font-weight: normal;
  }
}

.item-menu-name {
  font-weight: normal;
  font-size: 26rpx;
  padding: 0 30rpx;
  height: 50rpx;
  line-height: 50rpx;
  background: #fff;
  border-radius: 10rpx;
}

.item-menu-name2 {
  font-weight: 500;
  font-size: 26rpx;
  padding: 0 30rpx;
  height: 50rpx;
  line-height: 50rpx;
  color: 333;
}

.color-EB5C02 {
  color: #eb5c02;
}

.color-399F0D {
  color: #399f0d;
}

.item-container {
  background: #f9f9f9;
}

.thumb-box {
  padding: 0 20rpx;
}

.thumb-box-title {
  height: 88rpx;
}

.item-menu-image {
  width: 66rpx;
  height: 66rpx;
  border-radius: 10rpx;
  background: #fff;
}

.b-dashed {
  border: 2rpx dashed #999;
}

.handle-method {
  .methods-title {
    height: 50rpx;
    line-height: 50rpx;
  }
  .methods {
    display: flex;
    flex-direction: column;
    height: 120rpx;
    justify-content: space-between;
    padding-left: 20rpx;

    .methods-item {
      height: 50rpx;
      line-height: 50rpx;
      border: 2rpx solid #999;
      border-radius: 25rpx;
      font-size: 26rpx;
      padding: 0 20rpx;
      color: #999;
    }

    .methods-item-active {
      color: #eb5c02;
      border-color: #eb5c02;
    }
  }
}

// 提示弹框
.popup-content {
  padding: 30rpx 46rpx;
  text-align: center;

  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
  }

  .content {
    padding: 46rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
  }

  .btn-box {
    .btn {
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
    }

    .btn-left {
      width: 50%;
      border-radius: 39rpx 0 0 39rpx;
      height: 78rpx;
      font-size: 30rpx;
      background: #333;
      color: #ffe23e;
    }

    .btn-right {
      width: 50%;
      border-radius: 0 39rpx 39rpx 0;
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
      background: linear-gradient(-90deg, #fdd421, #ffe23e);
    }
  }

  button {
    background: linear-gradient(-90deg, #fbd220, #ffe23e);
    border-radius: 44rpx;

    &::after {
      border: 0;
    }
  }
}
</style>
